<template>
	<view class="binding" :class="{'binding1':nowCompany && nowCompany.name}">
		<!-- 绑定公司 -->
		<view class="flex_sa f24 topicons1">
			<view class="flex_ac">
				<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs4.png'></u-icon>
				<view class="cf ml8">
					优先推
				</view>
			</view>
			<view class="flex_ac">
				<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs3.png'></u-icon>
				<view class="cf ml8">
					更靠谱
				</view>
			</view>
			<view class="flex_ac">
				<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs2.png'></u-icon>
				<view class="cf ml8">
					有保障
				</view>
			</view>
			<view class="flex_ac">
				<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs1.png'></u-icon>
				<view class="cf ml8">
					放心入
				</view>
			</view>

			<view class="flex_ac" @tap="popupDescribe = true">
				<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/sm1.png'></u-icon>
				<view class="cf ml8">
					说明
				</view>
			</view>
		</view>
		<view class="gongshi" v-if="nowCompany && nowCompany.name">
			<view class="warning f24" v-if="status == 3">
				公司发起解绑，待您确认
			</view>
			<view class=" flex_ac">

				<view class="">
					<image class="touxiang" :src="$wanlshop.oss(nowCompany.avatar) " mode=""></image>
				</view>
				<view class="flex1 ml20 overflow_1">
					<view class="f32 fb flex_sb minwidth overflow_1">
						<view class="flex1 overflow_1">
							{{nowCompany.name}}
						</view>
						<view class="ml24">
							<text v-if="status == 0" class="error">申请中</text>
							<text v-if="status == 1" class="primary">已绑定</text>
							<text v-if="status == 2" class="warning">待公司解绑</text>
							<text v-if="status == 3" class="warning">待工匠解绑</text>
						</view>

					</view>
					<view class="mt8">
						<u-tag size="mini" :text="nowCompany.work_time+'年'" mode="light" type="warning" class="mr8" />
						<u-tag size="mini" text="20单" mode="light" type="primary" class="mr8" />
						<u-tag size="mini" text="企业认证" mode="light" type="primary" class="mr8" />
					</view>
					<view class="flex_sb mt8">
						<view class="info f24">
							距离{{nowCompany.distance}}km
						</view>
						<view class="">
							<u-button type="warning" plain size="mini" @click="qxjb" v-if="status == 1">解绑</u-button>
							<u-button type="warning" plain size="mini" @click="qdjb" v-if="status == 3">同意解绑</u-button>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="centerTbas mt24">

			<view class="cu-bar ">
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						placeholder="输入公司名称" v-model="keyword" @confirm="onSearchInputConfirmed"
						@input="onSearchInputChanged" />
					<view class="mr24 error fb " @click="onSearchInputChanged(keyword,'1')">
						搜索
					</view>
				</view>

			</view>
			<goods-tabs gutter='60' active-color='#FF3E2A' :list="navTitleList" :is-scroll="true"
				v-model="tabCurrentIndex" name="text_show"></goods-tabs>
		</view>


		<swiper :current="tabCurrentIndex" style="flex: 1;width: 100%;" duration="300" @change="changeTab"
			class="swiperBox">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="key">

				<scroll-view style="height: 100%;" class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.list.length === 0" />
					<!-- 订单列表 -->
					<block v-if="tag.list.length > 0">
						<view class="u-p-t-32" v-for="(goods, index) in tag.list" :key="index">
							<!-- 商品选择 -->
							<view class="forbox wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">
								<view class="flex_ac"
									@tap="$wanlshop.to('/pages/craftsman/company/homepage?user=true&id=' + goods.pid)">
									<image style="width: 132rpx;height: 132rpx;border-radius: 8rpx;"
										:src="$wanlshop.oss(goods.avatar)" mode=""></image>
									<view class="flex1 ml24 minwidth">
										<view class="f32 overflow_1 fb">
											{{goods.name}}
										</view>
										<view class="mt8">
											<u-tag :text="goods.work_time + '年'" type="info" size="mini" mode="light"
												shape="circle" />
											<u-tag v-if="goods.order > 0" class="ml12" type="info"
												:text="'完成'+goods.order + '单'" size="mini" mode="light"
												shape="circle" />
										</view>
										<view class="mt24 info f24" v-if="key== 0">
											距离 <text class="error">{{goods.distance}}</text>km
										</view>
										<view class="mt24 info f24" v-if="key == 1">
											解绑时间:{{goods.unbind_time_text}}
										</view>
									</view>
									<u-button size="mini" class="ml24" type="error" plain=""
										@click.stop='applyfor(goods, index)' v-if="!nowCompany.name">申请绑定</u-button>
								</view>

							</view>
						</view>
					</block>
					<uni-load-more :status="tag.loadingType" :content-text="contentText" v-if='tag.list.length != 0' />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="popupDescribe" mode="bottom" border-radius="24">
			<view class="describe">
				<view class="f32 fb">
					说明
				</view>

				<rich-text class="describeHtml" :nodes="describeConcat.content"></rich-text>
				<view class="describeBtn" @tap="popupDescribe = false">
					知道啦
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupDescribe: false,
				describeConcat: '',
				tabCurrentIndex: 0,
				nowCompany: null,
				navList: [{
						state: 0,
						text: '附近推荐',
						text_show: '附近推荐',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '已解绑',
						text_show: '已解绑',
						key: 'examine',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 2,
						text: '未通过',
						text_show: '未通过',
						key: 'sell_out',
						loadingType: 'more',
						current_page: 1,
						list: []
					},

				],

				navTitleList: [{
						state: 0,
						text: '附近推荐',
						text_show: '附近推荐',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '已解绑',
						text_show: '已解绑',
						key: 'examine',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 2,
						text: '未通过',
						text_show: '未通过',
						key: 'sell_out',
						loadingType: 'more',
						current_page: 1,
						list: []
					},

				],
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多数据了'
				},
				status: '',
				chooseList: [],
				keyword: '',
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadData('search');
			this.getarticle()
			this.getCompany()

		},
		methods: {
			qdjb() {
				this.$api.post({
					url: '/worker/user_join/agreeUnbind',
					data: {
						user_id: this.nowCompany.user_id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.getCompany()
					}
				})
			},
			qxjb() { //取消解绑
				let _this = this
				uni.showModal({
					title: `确定解绑${this.nowCompany.name}吗`,
					content: `申请解绑后最晚24小时自动解绑`,
					success: function(res) {
						if (res.confirm) {
							_this.$api.post({
								url: '/worker/user_join/sendUnBind',
								data: {
									user_id: _this.nowCompany.user_id
								},
								success: res1 => {
									_this.getCompany()
									_this.$wanlshop.msg('操作成功')
								}
							})
						}

					}
				});

			},
			getCompany() { //已绑定公司
				this.$api.get({
					url: '/worker/user_join/getCompany',
					success: res => {
						this.nowCompany = res.nowCompany
						this.status = res.status
					}
				})
			},
			getarticle() { //说明
				this.$api.get({
					url: '/wanlshop/article/details?id=12'
				}).then(res => {
					this.describeConcat = res
				})
			},
			applyfor(item, key) { //申请绑定
				console.log(item);
				let _this = this
				uni.showModal({
					title: `确定申请入驻${item.name}吗`,
					content: `公司同意后立即绑定关系`,
					success: function(res) {
						if (res.confirm) {
							_this.$api.post({
								url: '/worker/user_join/needJoin',
								data: {
									id: item.id
								},
								loadingTip: '申请中...',
								success: res1 => {
									_this.getCompany()
									uni.showToast({
										icon: 'none',
										title: '已申请'
									})
								}
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onSearchInputChanged(event, type) { //input搜索

				let value = event.detail.value;
				if (type) {
					value = event
				}
				if (!value) {
					return;
				} else {
					this.loadData('search');
					uni.hideKeyboard();
				}
			},
			onSearchInputConfirmed(event) { //input搜索
				let value = event.detail.value;
				if (!value) {
					this.loadData('search');
					uni.hideKeyboard();
				} else {
					uni.showModal({
						title: '提示',
						content: '请输入内容。'
					});
					return;
				}
			},


			loadData(source) { //获取订单列表
				//这里是将订单挂载到tab列表下

				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				let status = navItem.key
				console.log('loadData', index, navItem);
				if (source == 'search') {
					navItem.current_page = 1
					navItem.loadingType = 'more'
					navItem.list = []

				}
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}

				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				let data = {
					status: status,
					page: navItem.current_page,
				}
				if (this.keyword.length > 0) {
					data['title'] = this.keyword
				}
				let url = '/worker/user_join/companyList'
				if (index == 1) {
					url = '/worker/user_join/unBindList'
				}
				if (index == 2) {
					url = '/worker/user_join/joinFailList'
				}
				// 获取列表
				this.$api.get({
					url: url,
					data: data,
					loadingTip: '加载中...',
					success: res => {
						console.log(res);
						if (index == 0) {
							if (res.list.data) {
								res.list.data.forEach(res1 => {
									res1.name = res1.name
									res1.avatar = res1.avatar
									res1.pid = res1.user_id
								})
							}

						}

						navItem.current_page = res.list.current_page; //当前页码
						if (res.list.last_page === res.list.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						console.log(res, 'xx');
						let orderList = res.list.data;
						orderList.forEach(item => {
							navItem.list.push(item);
						});
						console.log(navItem)
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				this.chooseList = [];
				this.tabCurrentIndex = e.detail.current
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})
				// 获取列表
				this.loadData('tabChange');
			},

		}

	}
</script>

<style lang="scss" scoped>
	.binding1 {
		background-size: 750rpx 520rpx !important;
	}

	.binding {
		padding: 44rpx 0;
		width: 100%;
		background-image: url('https://img.aibbyp.com/wechatUser/craftsman/bjt.png');
		background-size: 750rpx 320rpx;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		overflow: scroll;

		.gongshi {
			width: calc(100% - 56rpx);
			background: #fff;
			border-radius: 20rpx;
			padding: 28rpx;
			margin-top: 30rpx;
		}

		.touxiang {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.describe {
			padding: 20rpx 32rpx 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 60rpx;
			max-height: 70vh;

			.describeHtml {
				margin-top: 40rpx;
				width: 100%;
			}

			.describeBtn {
				width: 660rpx;
				height: 80rpx;
				background: #FD5241;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				margin-top: 60rpx;
			}
		}

		.topicons1 {
			width: 100%;
			padding: 0 32rpx;
		}

		.forbox {
			background: #fff;
		}

		.centerTbas {
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			padding: 40rpx 54rpx 0;
		}
	}
</style>